<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body, div, ul, li, p {
            margin: 0;
            padding: 0;
        }
        body {
            background: #3e3e3e;
           font: 14px/1.5 \5fae\8f6f\96c5\9ed1;
        }

        #box {
        	width: 600px;
        	margin: 20px auto;
        	/*border: 1px solid #fff;*/
        }
        .list {
        	position: relative;
        	width: 600px;
            height: 144px;
            margin-bottom: 10px;
            overflow: hidden;
            border-radius: 8px;  
        }
       .list ul {
            position: absolute;
            top: 0;
            left: 0;

            height: 144px;
       }
       .list li {
            display: inline;
            float: left;
            width: 144px;
            height:　144px;
            list-style-type: none;
            background: #000;
            margin-right: 8px;
            border-radius: 8px; 
       }
       .list li img {
            float: left;
            width: 124px;
            height: 100px;
            border-radius: 5px;
            margin: 10px 0 0 10px;
       }
       .list li p {
            float: left;
            color: #fff;
            width: 100%;
            text-align: center;
            line-height: 34px;
       }
        
        .scrollBar {
            position: relative;

            height: 19px;
            background: #0a0a0a;
            overflow: hidden;
        }
        .scrollBar .barL,.scrollBar .barR,.scrollBar .barLStop,.scrollBar .barRStop {
            position: absolute;
            top: 0;

            width: 28px;
            height: 19px;
            cursor: pointer;

            background: url(image/03.gif) no-repeat;
        }
        
        .scrollBar .barL {
            left: 0;
        }
        .scrollBar .barR {
            right: 0;
            background-position: right 0;
        }
        .scrollBar .barLStop {
            left: 0;
            background-position: 0 -19px;
            cursor: default;
        }
        .scrollBar .barRStop {
            right: 0;
            background-position: right -19px;
            cursor: default;
        }
        
        .scrollBar .barM {
            position: relative;
            height: 15px;
            border: 1px solid #0ff;

            border-width: 1px 0;
            padding: 1px 0;

            margin: 0 28px;
            z-index: 1;
            cursor: pointer;
        }
        .scrollBar .barM .bar {
            position: absolute;
            top: 1px;
            left: 0;

            width: 150px;
            height: 15px;
            cursor: e-resize;
            background:url(image/01.gif) repeat-x;
        }
        .scrollBar .bar .l, .scrollBar .bar .r {
            position: absolute;
            top: 0;

            width: 6px;
            height: 15px;
            background: url(image/02.gif) no-repeat;
        }
        .scrollBar .bar .l {
            left: -6px;
        }
        .scrollBar .bar .r {
            right: -6px;
            background-position: right 0;
        }

        #desc {
            color:#ccc;
            width:578px;
            padding:10px;
            margin:0 auto;
            line-height:2;
            border:1px dashed #666;
        }
        #desc dd{margin-left:2em;}
        .ta-r{text-align:right;}
    </style>
    <script type="text/javascript">
        /* ------------------------- +
          获取id，class，tagname
         + ------------------------- */
         var get = {
            byId: function(id) {
                // 检测id为字符串的有效性
                return typeof id === "string" ? document.getElementById(id) : null; 
            },
            byClass: function(sClass, oParent) {
                // 存储所有类名的容器
                var aClass = [];
                // 匹配一个或者多个类名，且不一定是原始类名开头
                var reClass = new RegExp("(^| )" + sClass + "( |$)");
                // 获取某一父元素下所有元素
                var aElem = this.byTagName("*", oParent);
                // 筛选有效类名元素
                for(var i=0;i<aElem.length;i++) {
                    reClass.test(aElem[i].className) && aClass.push(aElem[i])
                }
                return aClass;
            },
            byTagName: function(elem, obj) {
                return (obj ||　document).getElementsByTagName(elem);
            }
         };
         /* ------------------------- +
           后去最终样式
         + ------------------------- */
         function getStyle(obj, attr) {
            return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr]);
         }
        window.onload = function() {
            var oBox = get.byId("box");
            var oList = get.byClass("list", oBox)[0];
            var oUl = get.byTagName("ul", oList)[0];
            var aLi = get.byTagName("li", oUl);

            var oScrollBar = get.byClass("scrollBar", oBox)[0];
            var oBarL = get.byClass("barL", oScrollBar)[0];
            var oBarM = get.byClass("barM", oScrollBar)[0];
            var oBarR = get.byClass("barR", oScrollBar)[0];
            var oBar = get.byClass("bar", oBarM)[0];
            var maxL = oBarM.offsetWidth - oBar.offsetWidth;
            var iMarginRight = getStyle(aLi[0], "marginRight");
            var timer = null;
            // 按比例计算bar的位置，将其同步到图片的移动位置
            var iScale = 0;
            var disX = 0;
            var i = 0;

            // 设置图片显示区最大滚动宽度
            oUl.style.width = (aLi[0].offsetWidth + iMarginRight) * aLi.length + "px";
            // 拖动滚动条
            oBar.onmousedown = function(event) {
                var event = event || window.event;
                // 设置开始移动的初始差值
                disX = event.clientX - oBar.offsetLeft;

                document.onmousemove = function(event) {
                    var event = event || window.event;
                    // 存储移动距离
                    var iL = event.clientX - disX;
                    iL <= 0 &&　(iL = 0);
                    iL >= maxL && (iL = maxL);
                    // 设置bar的内联样式才能生效
                    oBar.style.left = iL + "px";
                    // 设置当前的移动比率，便于图片和bar的同步
                    iScale = iL / maxL;

                    return false;
                }; 
                // 当鼠标离开bar时，图片开始同比率移动
                document.onmouseup = function() {
                    // 向左移动，目标值应该为负数
                    startMove(oUl, parseInt((oList.offsetWidth + iMarginRight - oUl.offsetWidth) * iScale));
                    // 判断是否临界
                    isStop();
                    // 无论是否临界，都要清空事件状态
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            };

            // 阻止滚动条点击事件冒泡
            oBar.onclick = function() {
                (event || document).cancelBubble = true;
            };

            // 滚动条可移动区域点击事件
            oBarM.onclick = function(event) {
                var iTarget = (event ||　window.event).clientX - oBox.offsetLeft - this.offsetLeft - oBar.offsetWidth / 2;

                togetherMove(iTarget);
            };

            // 滚动条左右移入和键盘左右键按下
            oBarL.onmouseover = oBarR.onmouseover = document.onkeydown = function(event) {
                clearInterval(timer);
                var event = event || window.event;
                var iSpeed = 0;
                if(this == oBarR || event.keyCode == 39) {
                    iSpeed = 5;
                }else if(this == oBarL || event.keyCode == 37) {
                    iSpeed = -5;
                }
                timer = setInterval(function() {
                    togetherMove(getStyle(oBar, "left") + iSpeed, 1)
                }, 30)
            };

            // 滚动条左右移出和键盘左右键抬起
            oBarL.onmouseout = oBarR.onmouseout = document.onkeyup = function(event) {
                clearInterval(timer);
            };
            console.log(oBar.offsetWidth)
            // 鼠标滚轮事件
            oBox.onmouseover = function(event) {
                var event = event || window.event;

                function mouseWheel(event) {
                    console.log(event.wheelDelta) // 120
                    var delta = event.wheelDelta ? event.wheelDelta : -event.detail * 40;
                    console.log(delta)
                    var iTarget = delta > 0 ? -50 : 50;
                    togetherMove(oBar.offsetLeft + iTarget);
                }
                addHandler(this, "mousewheel", mouseWheel);
                addHandler(this, "DOMMouseScroll", mouseWheel);
            }           

            // 页面加载完成会判断一次，滚动条是否临界
            isStop();

            // --------------------------------------------------
            // 功能函数
            // --------------------------------------------------
            function startMove(obj, iTarget, fnEnd, buffer) {
                clearInterval(obj.timer);
                // 设置定时器，循环执行 缓动动画操作
                obj.timer = setInterval(function() {
                    doMove(obj, iTarget, fnEnd, buffer);
                }, 25)
            }
            function doMove(obj, iTarget, fnEnd, buffer) {
                var iLeft = getStyle(obj, "left");
                // 设置缓冲速度iSpeed和缓冲系数buffer
                var iSpeed = (iTarget - iLeft) / (buffer || 5);

                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : (Math.floor(iSpeed));

                iLeft == iTarget ?
                    (clearInterval(obj.timer), fnEnd && fnEnd()) :
                    obj.style.left = iLeft + iSpeed + "px";
            }
            // 判断是否临界
            function isStop() {
                oBarL.className = "barL";
                oBarR.className = "barR";

                switch (oBar.offsetLeft) {
                    // 添加新的类名
                    case 0:
                        /(^|\s)barLStop(\s|$)/.test(oBarL.className) || (oBarL.className += " barLStop");
                        break;

                    case maxL:
                        /(^|\s)barRStop(\s|$)/.test(oBarR.className) || (oBarR.className += " barRStop");
                        break;
                }
            }
            // 图片列表和滚动条一起移动
            function togetherMove(iTarget, buffer) {
                if(iTarget <= 0) {
                    timer && clearInterval(timer);
                    iTarget = 0;
                }else if(iTarget >= maxL) {
                    timer && clearInterval(timer);
                    iTarget = maxL;
                }

                iScale = iTarget / maxL;
                startMove(oBar, iTarget, function() {isStop()}, buffer);
                startMove(oUl, parseInt((oList.offsetWidth + iMarginRight - oUl.offsetWidth) * iScale), function() {isStop()}, buffer);
            }
            // 事件监听
            function addHandler(element, type, handler) {
                return element.addEventListener ?
                    element.addEventListener(type, handler, false) :
                    element.addtachEvent("on" + type, handler);
            }
        };
    </script>
</head>
<body>
    <div id="box">
        <div class="list">
            <ul>
                <li><img src="image/1.jpg" alt="#"><p>iPhone 4</p></li>
                <li><img src="image/2.jpg" alt="#"><p>iPad 2</p></li>
                <li><img src="image/3.jpg" alt="#"><p>iPod touch</p></li>
                <li><img src="image/4.jpg" alt="#"><p>iPod classic</p></li>
                <li><img src="image/5.jpg" alt="#"><p>iPod shuffle</p></li>
                <li><img src="image/6.jpg" alt="#"><p>iPod nano</p></li>
                <li><img src="image/7.jpg" alt="#"><p>MacBook Air</p></li>
                <li><img src="image/8.jpg" alt="#"><p>MacBook Pro</p></li>
                <li><img src="image/9.jpg" alt="#"><p>Mac mini</p></li>
                <li><img src="image/10.jpg" alt="#"><p>Mac Pro</p></li>
            </ul>
        </div>
        <!-- /list -->
        <div class="scrollBar">
            <div class="barL"></div>
            <div class="barM">
                <div class="bar">
                    <div class="l"></div>
                    <div class="r"></div>
                </div>
            </div>
            <div class="barR"></div>
        </div>
        <!-- /scrollBar -->
    </div>
    <!-- /box -->
    <dl id="desc">
        <dt>功能说明：</dt>
        <dd>① 拖动滚动条，图片列表缓冲滑动至目标点；</dd>
        <dd>② 滚动条两端鼠标移入自动滑动</dd>
        <dd>③ 滚动条滑动到两端自动更换为停止标识；</dd>
        <dd>④ 点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；</dd>
        <dd>⑤ 支持键盘左右键；</dd>
        <dd>⑥ 支持鼠标滚轮。</dd>
        <dd class="ta-r">QQ:**, By — Ferris</dd>
    </dl>
</body>
</html>